<template>
	<canvas ref="leaferEl"></canvas>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { App, Image, ImageEvent } from "leafer-editor";

const backgroundUrl = "https://gallery-1318352346.cos.ap-guangzhou.myqcloud.com/upload/gallery/public/2024-05-21/PrAPChDteCx2Y6sm_600x960.png"
const maskUrl = "https://gallery-1318352346.cos.ap-guangzhou.myqcloud.com/upload/gallery/public/2024-05-21/HXQGyyQZtsSsmmCb_600x960.png"
const multiplyUrl = "https://gallery-1318352346.cos.ap-guangzhou.myqcloud.com/upload/gallery/public/2024-05-21/HS7befmZbNNnw8Fb_600x960.png"
const imageUrl = "https://gallery-dev-1318352346.cos.ap-guangzhou.myqcloud.com/upload/gallery/public/2024-05-25/jaibrhrCBWPfpa5w.png"

const leaferEl = ref<HTMLElement | null>(null);
let app: App;
onMounted(() => {
	app = new App({
		view: leaferEl.value as HTMLElement,
		width: document.body.clientWidth,
		height: document.body.clientHeight,
		editor: {
			lockRatio: true,
			resizeable: "zoom",
			rotateable: "rotate"
		},
		zoom: {
			disabled: true
		}
	});
	setBackground(backgroundUrl)
	setMaskLayer(maskUrl)  //注释掉此行代码，查看不同的流畅度效果
	setImageLayer(imageUrl)
	// setMultiplyLayer(multiplyUrl)  //不执行正片叠底，如果想看正片叠底对流畅度的影响 可以放开此行代码
})

const setBackground = (url: string) => {
	return new Promise<void>((resolve, reject) => {
		let image = new Image({ url: url })
		image.once(ImageEvent.LOADED, ()=>{
			let constrain=getConstraintSize(image.width!, image.height!, app.width!, app.height!)
			image.set({width:constrain.width,height:constrain.height})
			resolve()
		})
		app.tree.add(image)
	})
}

const setMaskLayer = (url: string) => {
	return new Promise<void>((resolve, reject) => {
		let image = new Image({
			url: url,
			mask: "pixel" //注释此行代码，查看不同的流畅度效果
		})
		image.once(ImageEvent.LOADED, ()=>{
			let constrain=getConstraintSize(image.width!, image.height!, app.width!, app.height!)
			image.set({width:constrain.width,height:constrain.height})
			resolve()
		})
		app.tree.add(image)
	})
}

const setImageLayer = (url: string) => {
	return new Promise<void>((resolve, reject) => {
		let image = new Image({ url: url, draggable: true, editable: true, })
		image.once(ImageEvent.LOADED, ()=>{
			let constrain=getConstraintSize(image.width!, image.height!, app.width!*0.5, app.height!*0.5)
			image.set({
				x:(app.width!-constrain.width)/2,
				y:(app.height!-constrain.height)/2,
				width:constrain.width,
				height:constrain.height
			})
			resolve()
		})
		app.tree.add(image)
	})
}

const setMultiplyLayer = (url: string) => {
	return new Promise<void>((resolve, reject) => {
		let image = new Image({
			url: url,
			blendMode: "multiply",
			hittable: false
		})
		image.once(ImageEvent.LOADED, ()=>{
			let constrain=getConstraintSize(image.width!, image.height!, app.width!, app.height!)
			image.set({width:constrain.width,height:constrain.height})
			resolve()
		})
		app.tree.add(image)
	})
}

/**计算约束尺寸 */
const getConstraintSize = (width: number, height: number, maxWidth: number, maxHeight: number, isFit: boolean = true): { width: number, height: number } => {
	let ratio = width / height;
	if (!isFit && width <= maxWidth && height <= maxHeight) {
		return {
			width, height
		}
	}

	width = maxWidth;
	height = width / ratio;
	if (height > maxHeight) {
		height = maxHeight;
		width = height * ratio;
	}
	return { width, height }
}
</script>
<style lang="scss" scoped></style>
